

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <meta http-equiv="X-UA-Compatible" content="IE=IE7" />
 <head>
 
    <title>
      Species Conservation Status Analysis Tool
    </title>
    <link rel="stylesheet" type="text/css" href="/style/style.css" />
 
	<script language="javascript">
	var ctl;
	var map;
	var pchart;
	var defaultData;
	var mapData;
	var pchartData;
	var species;
	</script>
	<%@ include file="./style/species_header.html" %>
	
	 
    <center>
			<!-- Information Box Overlay -->
		
			<div id="pageBlocker" class="transDiv" style="left:0;width:100%;height:700px;">
				<center>
				<div style="width:100%;text-align:center;padding-top:200px;font-weight:bold;">
				LOADING.....<br/>
				
				<img src="/style/ajax-loader.gif" alt="loading..." /> 	
				</div>				
			</div>
			<center>
			<div id="informationOverlay">
				<center>
				<div id="informationPanel"style="display:none;" >
					<div><span style="float:right;cursor:pointer;color:#990000;" onclick="ctl.CloseInformationPanel();">[Close]</span></div>
					<br/><br/>
					<div id="informationPanelContent"></div>
				</div>
				</center>
			</center>
			</div>
			<!-- Information Box -->	
			
			<!-- Species Information Box Overlay -->
			<div id="speciesInformationOverlay">
				<center>
				<div style="display:none;" id="speciesInformationPanel" >
					<div style="font-weight:bold;text-align:center;" >Species: <span id="scientificNameSpan"></span> 
					
						[<span id="vernacularNameSpan"></span>]
						<span style="float:right;cursor:pointer;color:#990000;" onclick="splist.CloseSpeciesInformationPanel();">[Close]</span>
					</div> 
					<div style="font-weight:bold;text-align:center;color:#990000;padding-top:5px;" id="missingSpeciesState"></div> 
					<br/> 
					<div style="margin-bottom:5px;">The following states/territories consider this species in need of greatest conservation:</div> 	
					<div id="speciesInformationLinkBox"></div> 
					<table style="width:100%;" >
						<tr>
						<th  style="border-right: 1px solid #ffffff;text-align:center;height:20px;">
						SWAP Status
						</th>
						<th style="text-align:center;height:20px;">
						NatureServe Status
						</th>
						</tr>
						<tr>
						<td style="padding:10px;border-top: 1px solid #ffffff; border-right: 1px solid #ffffff;vertical-align:top;">
						<div id="speciesGeoMap"><img src="/style/ajax-loader-long2.gif" alt="loading..." /></div>
						</td>
						<td style="vertical-align:top;border-top: 1px solid #ffffff;padding:10px;">
						<div id="speciesNSMap" ><img src="/style/ajax-loader-long2.gif" alt="loading..." /></div>
						</td>
						</tr>
					</table>
					
					
				</div>
				</center>
			</div>
			<!-- Species Information Box -->		

			<!-- Species Search Result Overlay -->
			<div id="speciesSearchResultOverlay">
				<center> 
				<div style="display:none;" id="speciesSearchResultPanel">
					<div style="font-weight:bold;text-align:center;" >Search Term: <span id="speciesSearchTerm"></span>
						<span style="float:right;cursor:pointer;color:#990000;" onclick="splist.CloseSpeciesSearchResultPanel();">[Close]</span>
						<br/> 						
					</div> 				 
					<div id="speciesSearchResultCount" ></div> 	
					<br/>
					<div id="speciesSearchResultBox" ><img src="/style/ajax-loader-long2.gif" alt="loading..." /></div>
				</div>
				</center>
			</div>
			<!-- Species Search Result  Box -->	
			
			<div id="mainPanel">
				<div class="mainTitle">
				
				SWAP Species Conservation Status Analysis Tool
				</div>
				<div class="searchBarHeader"></div>
				<div class="speciesSearchBar">
					
					<table cellspacing="0" cellpadding="0">
						<tr>
						<td style="vertical-align:middle;">
						<input type="text" id="speciesSearchBox" label="Species Name" />
						</td>
						<td style="vertical-align:middle;">
						<input type="button" id="speciesSearchButton" class="speciesSearchButton" value="Search Species" label="Search" onclick="splist.ShowSpeciesSearchResult($('#speciesSearchBox').val());"/>
						</td>
						</tr>
					</table>
				</div>
				<div class="searchBarFooter"></div>
				<br/>
		
						
				<table style="width:96%;" cellpadding="0" cellspacing="0" >
				 
					<tr>
						<td id="geoMapRestore" style="display:none;vertical-align:top;">
							<span class="restoreButton" onclick="map.RestoreGeoMap();pchart.MinimizeList();">Restore Map</span>
						</td> 
						<td id="geoMapPanel" >							
							<div class="optionBar">							
								 <span class="geoMapHeader" id="geoMapLabel">Species by State</span> 
								 <span class="minimizeButton" onclick="map.MinimizeGeoMap();pchart.RestoreList();" alt="Minimize">_</span>
							</div>
							<div style="width:100%;text-align:right;padding-top:3px;height:30px; ">																				
								<span onclick="ctl.ShowGeoMapView('table');" class="optionButton">Table</span>
								<span onclick="ctl.ShowGeoMapView('barchart');" class="optionButton">Bar Chart</span>
								<span onclick="ctl.ShowGeoMapView('default');" class="optionButton">Map</span>	
							</div>
							<div class="geoMapBox" id="map" ></div>						 
							<div style="display:none;" id="geoMapSpeciesListPanel" style="float:right;">
								<div id="geoMapSpeciesListHeader"  ></div>
								<div id="geoMapSpeciesListBox"></div>
							</div>						 
						</td>
						<td>&nbsp;&nbsp;&nbsp;</td> 
						<td id="pieChartPanel">
						
							<div class="optionBar">
								<span class="pieChartHeader" id="pieChartLabel">Species by Taxa</span>  
								<span onclick="pchart.MinimizePieChart();map.RestoreList();" alt="Minimize" class="minimizeButton">_</span> 								
							</div>			
							<div style="width:100%;padding-top:3px;">
								
								<div onclick="ctl.ShowPieChartView('table');" class="optionButton">Table</div>
								<div onclick="ctl.ShowPieChartView('barchart');" class="optionButton">Bar Chart</div>
								<div onclick="ctl.ShowPieChartView('default');" class="optionButton">Pie Chart</div>
		 
							</div>
							<br/><br/>
							<div style="width:100%;text-align:right;">
								<div class="pieChartBox" id="piechart" ></div>	
												
								<div style="display:none;" id="pieChartSpeciesListPanel"  >
									<div id="pieChartSpeciesListHeader" ></div>		
									<div id="pieChartSpeciesListBox"></div>
								</div>
							</div>
						</td>   
						<td id="pieChartRestore" style="display:none;vertical-align:top;text-align:right;">
							<span class="restoreButton" onclick="pchart.RestorePieChart();map.MinimizeList();">Restore Chart</span>
						</td> 
	
					</tr>
				</table>
				<br/><br/>
				
				
			</div>

   
	</center>
	<%@ include file="./style/species_footer.html" %>

	 
</body>
<script type="text/javascript"  src="http://www.google.com/jsapi"></script>
   
<script type="text/javascript">
    google.load("feeds", "1");

	google.load("visualization", "1", {packages: ['geomap', 'table', 'barchart', 'piechart']});    
	google.load("jquery", "1");
	</script>
	<!--  Loading Opensource JavaScript Libraries -->
	<script type="text/javascript"  src="./ext_js/jquery.url.js"></script>
	
	<!--  Loading Custom JavaScript Libraries -->
	<script type="text/javascript"  src="./js/GeoViz.js"></script>
	<script type="text/javascript"  src="./js/ChartViz.js"></script>
	<script type="text/javascript"  src="./js/SpeciesViz.js"></script>	
	<script type="text/javascript"  src="./js/data.inc.js"></script>
	<script type="text/javascript"  src="./js/Controller.js"></script>
	
     <script language="javascript">
     $(document).ready(function() {
 		//drawVisualization();
 		ctl = new Controller('pageBlocker','informationPanel', 'informationPanelContent', 'stateRecButton');
 		map = new SWAPGeoMap('geoMapPanel', 'map', 'geoMapLabel', 'geoMapSpeciesListPanel', 'geoMapSpeciesListBox', 'geoMapSpeciesListHeader', 'geoMapRestore', 'geoMapMinimize');
 		pchart = new PieChart('pieChartPanel', 'piechart', 'pieChartLabel', 'pieChartSpeciesListPanel', 'pieChartSpeciesListBox', 'pieChartSpeciesListHeader', 'pieChartRestore', 'pieChartMinimize');
 		splist = new SWAPSpeciesList('speciesInformationPanel', 'scientificNameSpan', 'vernacularNameSpan', 'speciesGeoMap', 'speciesNSMap', 'speciesInformationLinkBox');
 		ctl.LoadPage();

 	 	if($.url.param("state")){
			var stateVal = $.url.param("state");
			if(valid_state(stateVal)){
				geomap_onclick(stateVal);
			}
			 
 	 	}

 	 	if($.url.param("taxa")){
			var taxaVal = $.url.param("taxa");
			if(valid_taxa(taxaVal)){
				piechart_onclick(taxaVal);
			}
			 
 	 	}
 	 	
 	    $('input').live("keypress", function(e) {
 	       /* ENTER PRESSED*/
            if (e.keyCode == 13) {
               $("#speciesSearchButton").click();
                return false;
           }
        });
 	});
 
</script>

 </html>

